<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-color: #222;
			}
			#myCanvas{
				margin: 0 auto;
				border: 1px solid #f40;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="600" height="600" style="display: block;"></canvas>
		<script type="text/javascript">
			!function (w,e) {
				function Demo(option){
					Object.assign(this,{
						el: "#myCanvas",
						sx: 800,
						sy: 600
					},option)
					this.init()
				}
				Demo.prototype = {
					init(){
						this.canvas = e.querySelector(this.el)
						this.mainWidth = this.sx
						this.mainHeight = this.sy
						this.canvas.setAttribute("width",this.mainWidth)
						this.canvas.setAttribute("height",this.mainHeight)
						this.cx = this.canvas.getContext("2d")
						this.addEvents()
						this.start()
					},
					addEvents(){
					},
					draw(frame,once){
						this.cx.clearRect(0,0,this.mainWidth,this.mainHeight)
						if(once){
							frame()
						}else{
							this.timer = setInterval(frame,60/1000)
						}
					},
					start(){
						// 生成礁石
						var rockList = []
						for(var i = 0; i < 100; i++){
							rockList.push({
								pos: [Math.random() * this.mainWidth, Math.random() * this.mainHeight],
								color: Math.floor(Math.random() * 360)
							})
						}
						this.draw(() => {
							this.cx.fillStyle = "#000"
							this.cx.fillRect(0,0,this.mainWidth,this.mainHeight)
							rockList.forEach(r => {
								this.cx.fillStyle = `hsl(${ r.color },50%,70%)`
								this.cx.fillRect(...r.pos,4,4)
							})
						})
					}
				}
				w.Demo = Demo
			}(window,document)
			var d = new Demo({
				
			})
		</script>
	</body>
</html>